<template>
  <view class="cv-billing-box">
    <scroll-view
      class="context"
      style="height: calc(100% - 195rpx); margin-bottom: 20rpx"
      scroll-y="true"
    >
      <view class="cv-tongzhi">
        <my-icon name="icon-tongzhifill" :size="40"></my-icon>
        <text class="tip">温馨提示: 请适量点餐,避免浪费粮食。</text>
      </view>

      <my-address></my-address>

      <view class="goods-list-box">
        <goods-list></goods-list>
      </view>
    </scroll-view>

    <view class="pay-box" style="height: 175rpx">
      <view class="pay">
        <view class="left">
          <text class="txt">待付款</text>
          <text class="price">￥{{ store.useOrderStore.computePrice }}</text>
        </view>

        <view class="right">
          <view class="button" @click="pay">立即支付</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch,
  onMounted,
  getCurrentInstance,
} from 'vue'

import myIcon from '@/components/icon/src/font/my-icon.vue'
import myAddress from './common/address.vue'
import goodsList from './common/goods-list.vue'

import { useStore } from '@/store'
import { orderService } from '@/api'

const store = useStore()

const emit = defineEmits([''])
const props = defineProps({
  propData: {
    type: String,
    default: '',
  },
})
//const { } = toRefs(props);

const pay = async () => {
  uni.navigateTo({
    url: '/pages/shopdetail/pay/index',
  })
}

const { data } = toRefs(
  reactive({
    //定义数组和对象
    data: '',
  })
)
</script>
<style lang="scss" scoped>
.cv-billing-box {
  width: 100%;
  height: 100%;

  .context {
    width: 100%;
    box-sizing: border-box;
    padding: 0 20rpx;
  }

  .cv-tongzhi {
    background-color: bisque;
    display: flex;
    align-items: center;
    padding: 15rpx;
    border-radius: 20rpx;
    color: coral;
    margin: 20rpx 0;

    .tip {
      margin-left: 20rpx;
      font-size: 0.85rem;
    }
  }

  .goods-list-box {
    width: 100%;
    margin-top: 30rpx;
  }

  .pay-box {
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

    .pay {
      width: 90%;
      height: 70%;
      background-color: #5b5b5b;
      border-radius: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 0 30rpx;

      .left {
        width: 70%;
        font-size: 0.85rem;

        .txt {
          color: #fff;
        }
        .price {
          color: coral;
          margin-left: 20rpx;
        }
      }

      .right {
        width: 30%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .button {
          width: 100%;
          height: 60%;
          background-color: #40a9ff;
          color: #fff;
          border-radius: 50rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.75rem;
        }
      }
    }
  }
}
</style>
